Try it yourself editor

Code

<html>
    <head>
        <title>TextBox WaterMark</title>
        <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
        <style type="text/css">
            .water {
                font-family: Verdana;
                color: gray;
                width: 200px;
            }

.nowater {
                font-family: Verdana;
                color: black;
                width: 200px;
            }
        </style>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#txtName").focus(function () {
                    if (($("#txtName")).attr('class') == "water") {
                        $("#txtName").val("");
                        $("#txtName").removeClass("water");
                        $("#txtName").addClass("nowater");
                    }
                });
                $("#txtName").blur(function () {
                    if ($.trim($("#txtName").val()) == "") {
                        $("#txtName").val(this.title);
                        $("#txtName").removeClass("nowater");
                        $("#txtName").addClass("water");
                    }
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <input type="text" id="txtName" class="water" value="Type Email Id Here" title="Type Email Id Here" />
            </div>
        </form>
    </body>
</html>

Output